<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    <button>按钮6</button>
    <button>按钮7</button>
    <button>按钮8</button>
    <button>按钮8</button>
    <button>按钮10</button>
    
</body>


<script>
 var allBtn = document.querySelectorAll("button");

//  for (var i = 1; i<= 10; i++  ){
//     allBtn[(i-1)].onclick = function(){
//         console.log(i); //输出11 
//     } 
//  }

//闭包重点
for (var i = 1; i<= 10; i++  ){
    allBtn[(i-1)].onclick = (function(index){
        return function(){
            console.log(index); 
        }
        
    }) (i)
 }


// for (let i = 1; i<= 10; i++  ){
//     allBtn[(i-1)].onclick = (function(index){
//         return function(){
//             console.log(index); 
//         }
        
//     }) (i)
//  }
 




</script>

</html>